<template>
  <div class="commonBoxmp">
    <EasyPrint   v-model="previewDrawer"
    :options="option"
    :dataSource="datasource" 
    @handlePreview="handlePreview"
    @handleSave="handleSave"
    >
      
        </EasyPrint> 
        <PreviewPrint 
    renderType="render" 
      v-model="previewDrawer" :options="{
        ...previewData,
        model:option.model
      }"/>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
const previewDrawer = ref(false)
const previewData = ref()

const handleSave = (val:boolean,data:any)=>{
console.log('data :>> ', val);

}
const handlePreview = (val:boolean,data:any)=>{
previewDrawer.value  = val;
console.log('data :>> ', data);
previewData.value = data;
}
const datasource = [
    {
        "module_name": "客户",
        "module_field": "customer",
        "module_content": [
            {
                "field": "editor_1732505813",
                "name": "编辑器",
                "field_data_id": 1
            },
            {
                "field": "checkbox_1700212268",
                "name": "多选框组",
                "field_data_id": 1
            },
            {
                "field": "selectcheckbox_1692251151",
                "name": "公司大小",
                "field_data_id": 1
            },
            {
                "field": "cascader_1692251051",
                "name": "级联选择器",
                "field_data_id": 1
            },
            {
                "field": "select_1692251046",
                "name": "公司规模",
                "field_data_id": 1
            },
            {
                "field": "email",
                "name": "邮箱地址",
                "field_data_id": 1
            },
            {
                "field": "description",
                "name": "备注",
                "field_data_id": 1
            },
            {
                "field": "address",
                "name": "地址",
                "field_data_id": 1
            },
            {
                "field": "industry",
                "name": "营业额",
                "field_data_id": 1
            },
            {
                "field": "origin",
                "name": "客户来源",
                "field_data_id": 1
            },
            {
                "field": "grade",
                "name": "等级",
                "field_data_id": 1
            },
            {
                "field": "customer_status",
                "name": "跟进状态",
                "field_data_id": 1
            },
            {
                "field": "website",
                "name": "地址",
                "field_data_id": 1
            },
            {
                "field": "mobile",
                "name": "客户电话",
                "field_data_id": 1
            },
            {
                "field": "name",
                "name": "客户名称",
                "field_data_id": 1
            },
            {
                "field": "number",
                "name": "客户编号",
                "field_data_id": 1
            },
            {
                "field": "creation_method",
                "name": "创建方式",
                "field_data_id": 1
            },
            {
                "field": "visible_user_ids",
                "name": "团队成员",
                "field_data_id": 1
            },
            {
                "field": "last_contact_time",
                "name": "最近跟进时间",
                "field_data_id": 1
            },
            {
                "field": "lock_flag",
                "name": "锁定状态",
                "field_data_id": 1
            },
            {
                "field": "address_location",
                "name": "经纬度坐标",
                "field_data_id": 1
            },
            {
                "field": "next_contact_time",
                "name": "下次联系时间",
                "field_data_id": 1
            },
            {
                "field": "contacts",
                "name": "首要联系人",
                "field_data_id": 1
            },
            {
                "field": "deal_state",
                "name": "客户成交状态",
                "field_data_id": 1
            },
            {
                "field": "last_pool_time",
                "name": "最近回收时间",
                "field_data_id": 1
            },
            {
                "field": "recycle_days",
                "name": "距离回收天数",
                "field_data_id": 1
            },
            {
                "field": "owner_user_id",
                "name": "负责人",
                "field_data_id": 1
            },
            {
                "field": "owner_dep_id",
                "name": "负责人部门",
                "field_data_id": 1
            },
            {
                "field": "creator_user_id",
                "name": "创建人",
                "field_data_id": 1
            },
            {
                "field": "create_time",
                "name": "创建时间",
                "field_data_id": 1
            },
            {
                "field": "update_time",
                "name": "更新时间",
                "field_data_id": 1
            }
        ]
    },
    {
        "module_name": "联系人",
        "module_field": "contact",
        "module_content": [
            {
                "field": "input_1646201281",
                "name": "身份证号",
                "field_data_id": 2
            },
            {
                "field": "customer_id",
                "name": "相关客户",
                "field_data_id": 2
            },
            {
                "field": "description",
                "name": "备注",
                "field_data_id": 2
            },
            {
                "field": "address",
                "name": "地址",
                "field_data_id": 2
            },
            {
                "field": "qq",
                "name": "QQ",
                "field_data_id": 2
            },
            {
                "field": "wechat",
                "name": "微信",
                "field_data_id": 2
            },
            {
                "field": "birthday",
                "name": "出生日期",
                "field_data_id": 2
            },
            {
                "field": "sex",
                "name": "尊称",
                "field_data_id": 2
            },
            {
                "field": "email",
                "name": "电子邮件",
                "field_data_id": 2
            },
            {
                "field": "phone",
                "name": "座机",
                "field_data_id": 2
            },
            {
                "field": "mobile",
                "name": "手机",
                "field_data_id": 2
            },
            {
                "field": "post",
                "name": "职务",
                "field_data_id": 2
            },
            {
                "field": "name",
                "name": "姓名",
                "field_data_id": 2
            },
            {
                "field": "visible_user_ids",
                "name": "团队成员",
                "field_data_id": 2
            },
            {
                "field": "owner_user_id",
                "name": "负责人",
                "field_data_id": 2
            },
            {
                "field": "owner_dep_id",
                "name": "负责人部门",
                "field_data_id": 2
            },
            {
                "field": "creator_user_id",
                "name": "创建人",
                "field_data_id": 2
            },
            {
                "field": "create_time",
                "name": "创建时间",
                "field_data_id": 2
            },
            {
                "field": "update_time",
                "name": "更新时间",
                "field_data_id": 2
            }
        ]
    },
    {
        "module_name": "商机",
        "module_field": "opportunity",
        "module_content": [
            {
                "field": "cascader_1691116992",
                "name": "级联选择器",
                "field_data_id": 3
            },
            {
                "field": "checkbox_1691024297",
                "name": "多选框组",
                "field_data_id": 3
            },
            {
                "field": "selectcheckbox_1691024212",
                "name": "下拉多选框",
                "field_data_id": 3
            },
            {
                "field": "address_1687674528",
                "name": "地址",
                "field_data_id": 3
            },
            {
                "field": "storerole_c_id",
                "name": "店员管理",
                "field_data_id": 3
            },
            {
                "field": "img_1608865197",
                "name": "图片",
                "field_data_id": 3
            },
            {
                "field": "description",
                "name": "备注",
                "field_data_id": 3
            },
            {
                "field": "level",
                "name": "商机级别",
                "field_data_id": 3
            },
            {
                "field": "source",
                "name": "商机来源",
                "field_data_id": 3
            },
            {
                "field": "group_id",
                "name": "商机流程组",
                "field_data_id": 3
            },
            {
                "field": "price",
                "name": "商机金额(元)",
                "field_data_id": 3
            },
            {
                "field": "expected_date",
                "name": "预计成交日期",
                "field_data_id": 3
            },
            {
                "field": "name",
                "name": "商机名称",
                "field_data_id": 3
            },
            {
                "field": "customer_id",
                "name": "客户",
                "field_data_id": 3
            },
            {
                "field": "number",
                "name": "商机编号",
                "field_data_id": 3
            },
            {
                "field": "process_id",
                "name": "商机流程",
                "field_data_id": 3
            },
            {
                "field": "visible_user_ids",
                "name": "团队成员",
                "field_data_id": 3
            },
            {
                "field": "state",
                "name": "结束状态",
                "field_data_id": 3
            },
            {
                "field": "state_reason",
                "name": "结束理由",
                "field_data_id": 3
            },
            {
                "field": "state_remark",
                "name": "结束备注",
                "field_data_id": 3
            },
            {
                "field": "next_contact_time",
                "name": "下次联系时间",
                "field_data_id": 3
            },
            {
                "field": "owner_user_id",
                "name": "负责人",
                "field_data_id": 3
            },
            {
                "field": "owner_dep_id",
                "name": "负责人部门",
                "field_data_id": 3
            },
            {
                "field": "creator_user_id",
                "name": "创建人",
                "field_data_id": 3
            },
            {
                "field": "create_time",
                "name": "创建时间",
                "field_data_id": 3
            },
            {
                "field": "update_time",
                "name": "更新时间",
                "field_data_id": 3
            }
        ]
    },
    {
        "module_name": "合同",
        "module_field": "contract",
        "module_content": [
            {
                "field": "file_1742364830",
                "name": "合同附件",
                "field_data_id": 5
            },
            {
                "field": "address_1687679485",
                "name": "地址",
                "field_data_id": 5
            },
            {
                "field": "quotation_id",
                "name": "报价单",
                "field_data_id": 5
            },
            {
                "field": "product_price",
                "name": "产品总金额(元)",
                "field_data_id": 5
            },
            {
                "field": "contact_email",
                "name": "联系人邮箱",
                "field_data_id": 5
            },
            {
                "field": "contact_mobile",
                "name": "联系人手机",
                "field_data_id": 5
            },
            {
                "field": "contact_id",
                "name": "联系人",
                "field_data_id": 5
            },
            {
                "field": "renew",
                "name": "合同类型",
                "field_data_id": 5
            },
            {
                "field": "end_time",
                "name": "合同到期时间",
                "field_data_id": 5
            },
            {
                "field": "start_time",
                "name": "合同生效时间",
                "field_data_id": 5
            },
            {
                "field": "signing_time",
                "name": "签约时间",
                "field_data_id": 5
            },
            {
                "field": "price",
                "name": "合同金额(元)",
                "field_data_id": 5
            },
            {
                "field": "opportunity_id",
                "name": "来源商机",
                "field_data_id": 5
            },
            {
                "field": "customer_id",
                "name": "来源客户",
                "field_data_id": 5
            },
            {
                "field": "name",
                "name": "合同名称",
                "field_data_id": 5
            },
            {
                "field": "number",
                "name": "合同编号",
                "field_data_id": 5
            },
            {
                "field": "contract_money_dx",
                "name": "合同金额(大写)",
                "field_data_id": 5
            },
            {
                "field": "payment_money",
                "name": "已回/剩余(元)",
                "field_data_id": 5
            },
            {
                "field": "payment_status",
                "name": "回款状态",
                "field_data_id": 5
            },
            {
                "field": "renew_id",
                "name": "续约合同",
                "field_data_id": 5
            },
            {
                "field": "discount",
                "name": "总折扣（%）",
                "field_data_id": 5
            },
            {
                "field": "state",
                "name": "合同状态",
                "field_data_id": 5
            },
            {
                "field": "approval_state",
                "name": "审核状态",
                "field_data_id": 5
            },
            {
                "field": "void_time",
                "name": "作废时间",
                "field_data_id": 5
            },
            {
                "field": "void_reason",
                "name": "作废原因",
                "field_data_id": 5
            },
            {
                "field": "channel_id",
                "name": "渠道商",
                "field_data_id": 5
            },
            {
                "field": "channel_user_id",
                "name": "渠道负责人",
                "field_data_id": 5
            },
            {
                "field": "out_status",
                "name": "出库状态",
                "field_data_id": 5
            },
            {
                "field": "owner_user_id",
                "name": "负责人",
                "field_data_id": 5
            },
            {
                "field": "owner_dep_id",
                "name": "负责人部门",
                "field_data_id": 5
            },
            {
                "field": "creator_user_id",
                "name": "创建人",
                "field_data_id": 5
            },
            {
                "field": "create_time",
                "name": "创建时间",
                "field_data_id": 5
            },
            {
                "field": "update_time",
                "name": "更新时间",
                "field_data_id": 5
            }
        ]
    }
]
const option ={
    "width": 80,
    "height": 80,
    "data": [
        {
            "id": "5fd93fe2-0953-4f91-82db-b77643ef5ac8",
            "renderList": [
                {
                    "componentName": "textContainer",
                    "attrsJson": [
                        {
                            "label": "字段",
                            "type": "FORMITEM",
                            "prop": "prop",
                            "defaultValue": "KevinCharlesTaylor",
                            "componentName": "InputOrSelectData",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "宽",
                            "type": "STYLE",
                            "prop": "w",
                            "defaultValue": 80,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "高",
                            "type": "STYLE",
                            "prop": "h",
                            "defaultValue": 20,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "x轴",
                            "type": "STYLE",
                            "prop": "x",
                            "defaultValue": 222,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "y轴",
                            "type": "STYLE",
                            "prop": "y",
                            "defaultValue": 269,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "type": "COMPONENT",
                            "label": "默认值",
                            "prop": "defaultValue",
                            "defaultValue": "请输入文字",
                            "componentName": "ElInput",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": false,
                                    "message": "",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "type": "STYLE",
                            "label": "文本颜色",
                            "prop": "color",
                            "defaultValue": "#000",
                            "componentName": "ElColorPicker",
                            "attrs": {}
                        },
                        {
                            "label": "对齐方式",
                            "prop": "textAlign",
                            "type": "STYLE",
                            "defaultValue": "left",
                            "componentName": "ElSelect",
                            "attrs": {
                                "placeholder": "请选择类型",
                                "clearable": true
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "类型不能为空",
                                    "trigger": "change"
                                }
                            ],
                            "children": [
                                {
                                    "componentName": "ElOption",
                                    "value": "center",
                                    "label": "居中"
                                },
                                {
                                    "componentName": "ElOption",
                                    "value": "left",
                                    "label": "左对齐"
                                },
                                {
                                    "componentName": "ElOption",
                                    "value": "right",
                                    "label": "右对齐"
                                }
                            ]
                        },
                        {
                            "label": "字体类型",
                            "prop": "fontFamily",
                            "type": "STYLE",
                            "defaultValue": "雅黑",
                            "componentName": "ElSelect",
                            "attrs": {
                                "placeholder": "请选择类型",
                                "clearable": true
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "类型不能为空",
                                    "trigger": "change"
                                }
                            ],
                            "children": [
                                {
                                    "componentName": "ElOption",
                                    "value": "宋体",
                                    "label": "宋体"
                                },
                                {
                                    "componentName": "ElOption",
                                    "label": "雅黑",
                                    "value": "雅黑"
                                },
                                {
                                    "componentName": "ElOption",
                                    "label": "Arial",
                                    "value": "Arial"
                                }
                            ]
                        },
                        {
                            "label": "字体大小",
                            "type": "STYLE",
                            "prop": "fontSize",
                            "defaultValue": 12,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        }
                    ],
                    "title": "文本",
                    "prop": "KevinCharlesTaylor",
                    "attrs": {
                        "defaultValue": "请输入文字"
                    },
                    "type": "COMPONENT",
                    "styles": {
                        "resizable": true,
                        "active": false,
                        "x": 222,
                        "y": 269,
                        "draggable": true,
                        "w": 80,
                        "h": 20,
                        "color": "#000",
                        "textAlign": "left",
                        "fontFamily": "雅黑",
                        "fontSize": 12
                    },
                    "id": "31eb4350-c49e-4469-a500-0ad13386f7d0",
                    "pageIndex": 0
                },
                {
                    "componentName": "TwoCodeContainer",
                    "attrsJson": [
                        {
                            "label": "字段",
                            "type": "FORMITEM",
                            "prop": "prop",
                            "defaultValue": "MariaJamesJones",
                            "componentName": "InputOrSelectData",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "宽",
                            "type": "STYLE",
                            "prop": "w",
                            "defaultValue": 80,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "高",
                            "type": "STYLE",
                            "prop": "h",
                            "defaultValue": 80,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "x轴",
                            "type": "STYLE",
                            "prop": "x",
                            "defaultValue": 222,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "y轴",
                            "type": "STYLE",
                            "prop": "y",
                            "defaultValue": 9,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "type": "COMPONENT",
                            "label": "尺寸大小",
                            "prop": "size",
                            "defaultValue": 100,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": false,
                                    "message": "",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "type": "COMPONENT",
                            "label": "icon",
                            "prop": "logoSrc",
                            "defaultValue": null,
                            "componentName": "uploadImg",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": false,
                                    "message": "",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "type": "COMPONENT",
                            "label": "icon网络地址",
                            "prop": "logoSrc",
                            "defaultValue": null,
                            "componentName": "ElInput",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": false,
                                    "message": "",
                                    "trigger": " change"
                                }
                            ]
                        },
                        {
                            "type": "COMPONENT",
                            "label": "编码内容",
                            "prop": "defaultValue",
                            "defaultValue": "https://qz.io/assets/img/clients/pakaneo.63268af2.webp",
                            "componentName": "ElInput",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": false,
                                    "message": "",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "type": "COMPONENT",
                            "label": "背景色",
                            "prop": "backgroundColor",
                            "defaultValue": "#FFF",
                            "componentName": "ElColorPicker",
                            "attrs": {}
                        },
                        {
                            "type": "COMPONENT",
                            "label": "容错级别 0-3",
                            "prop": "correctLevel",
                            "defaultValue": 1,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "min": 0,
                                "max": 3
                            },
                            "rules": [
                                {
                                    "required": false,
                                    "message": "",
                                    "trigger": "change"
                                }
                            ]
                        }
                    ],
                    "title": "二维码",
                    "attrs": {
                        "size": 100,
                        "defaultValue": "https://qz.io/assets/img/clients/pakaneo.63268af2.webp",
                        "backgroundColor": "#FFF",
                        "correctLevel": 1
                    },
                    "prop": "MariaJamesJones",
                    "styles": {
                        "x": 222,
                        "y": 9,
                        "resizable": true,
                        "draggable": true,
                        "w": 80,
                        "h": 80,
                        "active": true
                    },
                    "id": "f24cf0c9-4245-4c0d-89d4-3ee3a7f61fcc",
                    "pageIndex": 0
                }
            ]
        },
        {
            "id": "07318886-ab4d-47e9-b721-b9857f680b51",
            "renderList": [
                {
                    "title": "条形码",
                    "prop": "ElizabethRobertDavis",
                    "componentName": "BarCodeContainer",
                    "attrsJson": [
                        {
                            "label": "字段",
                            "type": "FORMITEM",
                            "prop": "prop",
                            "defaultValue": "ElizabethRobertDavis",
                            "componentName": "InputOrSelectData",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "宽",
                            "type": "STYLE",
                            "prop": "w",
                            "defaultValue": 200,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "高",
                            "type": "STYLE",
                            "prop": "h",
                            "defaultValue": 60,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "x轴",
                            "type": "STYLE",
                            "prop": "x",
                            "defaultValue": 102,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "y轴",
                            "type": "STYLE",
                            "prop": "y",
                            "defaultValue": 536,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "type": "COMPONENT",
                            "label": "条形码格式",
                            "prop": "format",
                            "defaultValue": null,
                            "componentName": "ElInput",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": false,
                                    "message": "",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "type": "COMPONENT",
                            "label": "编码内容",
                            "prop": "defaultValue",
                            "defaultValue": "123456789",
                            "componentName": "ElInput",
                            "attrs": {
                                "placeholder": "请输入"
                            },
                            "rules": [
                                {
                                    "required": false,
                                    "message": "",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "type": "COMPONENT",
                            "label": "线颜色",
                            "prop": "lineColor",
                            "defaultValue": "#000",
                            "componentName": "ElColorPicker",
                            "attrs": {}
                        },
                        {
                            "label": "是否显示值",
                            "prop": "displayValue",
                            "type": "COMPONENT",
                            "defaultValue": true,
                            "componentName": "ElSwitch",
                            "attrs": {}
                        },
                        {
                            "label": "条形码宽度",
                            "type": "COMPONENT",
                            "prop": "width",
                            "defaultValue": 2,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "条形码高度",
                            "type": "COMPONENT",
                            "prop": "height",
                            "defaultValue": 30,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "外边距",
                            "type": "COMPONENT",
                            "prop": "margin",
                            "defaultValue": 10,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        },
                        {
                            "label": "字体大小",
                            "type": "COMPONENT",
                            "prop": "fontSize",
                            "defaultValue": 12,
                            "componentName": "ElInputNumber",
                            "attrs": {
                                "placeholder": "请输入",
                                "controlsPosition": "right",
                                "min": 0
                            },
                            "rules": [
                                {
                                    "required": true,
                                    "message": "不能为空",
                                    "trigger": "change"
                                }
                            ]
                        }
                    ],
                    "attrs": {
                        "defaultValue": "123456789",
                        "lineColor": "#000",
                        "displayValue": true,
                        "width": 2,
                        "height": 30,
                        "margin": 10,
                        "fontSize": 12
                    },
                    "styles": {
                        "x": 102,
                        "y": 536,
                        "resizable": false,
                        "draggable": true,
                        "w": 200,
                        "h": 60,
                        "active": false
                    },
                    "id": "f81ba0d4-a131-4f77-bbf7-884b36fdb116",
                    "pageIndex": 1
                }
            ]
        }
    ],
    "qzOption": {
        "size": {
            "width": 80,
            "height": 80
        },
        "units": "mm"
    },
    "page": 2,
    "dataSource": "Parameter",
    "model":[
         {
        "KevinCharlesTaylor": "1111 ",
        "MariaJamesJones": "https://qz.io/assets/img/clients/pakaneo.63268af2.webp",
        "ElizabethRobertDavis": "123456789"
    },
     {
        "KevinCharlesTaylor": "请输入文字",
        "MariaJamesJones": "https://qz.io/assets/img/clients/pakaneo.63268af2.webp",
        "ElizabethRobertDavis": "123456789"
    }
    ]
}
</script>
 
<style>
.h100{
    height: 100%;
    width: 100%;
}
</style>